<template>
    <div>
      <el-table
        height="500"
        :data="props.tableData"
        :loading="props.loading"
        @selection-change="handlesomeclick"
      >
        <el-table-column v-if="props.deletSome" type="selection" width="55" align="center" />
        <el-table-column
          v-for="(col, index) in props.columns"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
  
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" min-width="120" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits, onMounted, watch } from 'vue'
  const props = defineProps({
    columns: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    deletSome: {
      type: Boolean,
      default: true,
    },
  })
  
  const emits = defineEmits(['delete'])
  
  // 处理编辑
  const handleEdit = (row) => {
    console.log('Edit row:', row)
    emits('editRow', row)
    // 这里可以实现编辑逻辑
  }
  function handlesomeclick(row) {
    emits('somedelete', row)
  }
  // // watch(props.tableData, (newVal) => {
  //   console.log("父组件 tableData 变化:", newVal);
  // }, { deep: true });
  // 处理删除
  const handleDelete = (row) => {
    emits('delete', row)
  }
  
  onMounted(() => {
    console.log(props.tableData, '子组件的值', props.columns)
  })
  </script>
  
  <style scoped>
  .text-danger {
    color: #f56c6c;
  }
  </style>
  